<template>
    <div class="myOrder">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="我的订单"
      left-text
      left-arrow
      @click-left="onClickLeft"
      class="header"
    >
      <van-icon name="search" slot="right" @click="searchBtn" />
      <van-icon name="service" slot="right" @click="serverBtn" />
    </van-nav-bar>

    <!--  搜索弹出层  -->
    <van-popup
      class="search_popup"
      v-model="searchShow"
      position="top"
      closeable
      close-icon="arrow-left"
      close-icon-position="top-left"
      :style="{ height: '100%' }"
    >
      <div class="input">
        <van-field class="search_input" v-model="code" placeholder="请输入IMEI或物品编号" />
        <span class="search_cancel" @click="searchShow = false">取消</span>
      </div>
    </van-popup>

    <!--  tab 分页  -->
    <div class="nav_btn">
      <van-tabs class="nav_btn_top" v-model="active" color="#FF3B3E" line-width="35" :border="false">
        <van-tab class="nav_btn_content" title="全部">
          <div class="nav_btn_content_item" v-for="(item, index) in allOrder" :key="index" @click="goOrderDetail(item.payState)">
            <div class="item_top">
              <span class="item_top_left">
                {{item.specialPerformance}}
              </span>
              <h3 class="item_top_center">
                {{item.orderTime}}
              </h3>
              <span class="item_top_right">
                {{item.payState}}
              </span>
            </div>
            <div class="item_middle">
              <div class="item_middle_item" v-for="row in item.goods">
                <div class="item_middle_item_top">
                  <span class="item_grade">{{row.grade}}</span>
                  <h1 class="item_title">
                    {{row.title}}
                  </h1>
                  <em class="item_price">￥{{row.price}}</em>
                </div>
                <div class="item_middle_item_bottom">
                  <p class="item_info">
                    {{row.info}}
                  </p>
                </div>
              </div>
            </div>
            <div class="item_third">
              <i>共{{item.goods.length}}件宝贝</i>
            </div>
            <div class="item_bottom">
              <div class="item_bottom_left">
                <i class="item_bottom_left_states">{{item.orderState}}</i>
               <span class="item_bottom_left_">￥{{item.totalPrice}}</span>
              </div>
              <van-button class="item_bottom_right" type="default">{{item.btn}}</van-button>
            </div>
          </div>
        </van-tab>
        <van-tab class="nav_btn_content" title="待支付">内容 2</van-tab>
        <van-tab class="nav_btn_content" title="已支付">内容 3</van-tab>
        <van-tab class="nav_btn_content" title="已取消">内容 4</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "myOrder",
  data() {
    return {
      active: 0,
      searchShow: false, // 搜索弹出层
      code: '',
      // 全部
      allOrder: [
        {
          specialPerformance: '手机专场',
          orderTime:'2019-7-30 4:50',
          payState: '待付款',
          goods: [
            {
              title: '产品标题产品标题产品标题产adadadad',
              grade: 'A2',
              price: '123.00',
              info: '5300 11什么介绍什么介绍什么介绍什么介绍',
            },
            {
              title: '产品标题产品标题产品标题产啊大大发啊',
              grade: 'A2',
              price: '123.00',
              info: '5300 11什么介绍什么介绍什么介绍什么介绍',
            }
          ],
          totalCount: '2',
          orderState: '已付',
          totalPrice: '2,218.00',
          btn: '物流',
        },
        {
          specialPerformance: '手机专场',
          orderTime:'2019-7-30 4:50',
          payState: '已付款',
          goods: [
            {
              title: '产品标题产品标题产品标题产...',
              grade: 'A2',
              price: '123.00',
              info: '5300 11什么介绍什么介绍什么介绍什么介绍',
            },
            {
              title: '产品标题产品标题产品标题产...',
              grade: 'A2',
              price: '123.00',
              info: '5300 11什么介绍什么介绍什么介绍什么介绍',
            },
            {
              title: '产品标题产品标题产品标题产...',
              grade: 'A2',
              price: '123.00',
              info: '5300 11什么介绍什么介绍什么介绍什么介绍',
            }
          ],
          totalCount: '2',
          orderState: '已付',
          totalPrice: '2,218.00',
          btn: '物流',
        },
        {
          specialPerformance: '手机专场',
          orderTime:'2019-7-30 4:50',
          payState: '已取消',
          goods: [
            {
              title: '产品标题产品标题产品标题产...',
              grade: 'A2',
              price: '123.00',
              info: '5300 11什么介绍什么介绍什么介绍什么介绍',
            },
            {
              title: '产品标题产品标题产品标题产...',
              grade: 'A2',
              price: '123.00',
              info: '5300 11什么介绍什么介绍什么介绍什么介绍',
            },
            {
              title: '产品标题产品标题产品标题产...',
              grade: 'A2',
              price: '123.00',
              info: '5300 11什么介绍什么介绍什么介绍什么介绍',
            }
          ],
          totalCount: '2',
          orderState: '已付',
          totalPrice: '2,218.00',
          btn: '物流',
        }
      ]
    }
  },
  created() {
  },
  methods: {
    // 查看详情
    goOrderDetail(payState) {
      console.log(payState)
      if (payState == '待付款') {
        this.$router.push({path: '/orderDetail', query : {payState: 'paying'}})
      }
      else if (payState == '已付款') {
        this.$router.push({path: '/orderDetail', query : {payState: 'payed'}})
      }
      else if (payState == '已取消') {
        this.$router.push({path: '/orderDetail', query : {payState: 'cancel'}})
      }
    },

    // 返回
    onClickLeft() {
      this.$router.go(-1)
    },
    // 右侧按钮
    searchBtn() {
      console.log("搜搜");
      this.searchShow = true
    },
    serverBtn() {
      console.log("按钮");
    },
  }
};
</script>

<style scoped lang="less">
@deep: ~">>>";
.myOrder {
  .header {
    width: 100%;
    height: 100px;
    @{deep} .van-icon {
      font-size: 19px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);

    }
    @{deep} .van-icon-search {
      margin-right: 30px;
    }
    @{deep} .van-nav-bar__title {
      line-height: 50px;
      font-size: 18px;
      font-family: SourceHanSansCN;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
    }
  }
  .search_popup {
    .input {
      width: 100%;
      height: 128px;
      line-height: 68px;
      background-color: #FAFAFA;
      margin-top: 100px;
      padding: 30px;
      .search_input {
        width:584px;
        height:68px;
        float: left;
        padding: 0 16px;
        line-height: 68px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(193,193,193,1);
        border-radius:34px;
      }
      .search_cancel {
        float: right;
        font-size:30px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(136,136,136,1);
      }
    }
  }
  .nav_btn {
    width: 100%;
    height:128px;
    .nav_btn_top {
      .nav_btn_content {
        padding: 77px 30px;
        .nav_btn_content_item {
          width:690px;
          margin-top: 30px;
          background:rgba(255,255,255,1);
          border-radius:9px;
          padding: 30px;
          .item_top {
            width: 100%;
            height: 66px;
            font-family:SourceHanSansCN;
            font-weight:400;
            border-bottom: 2px dotted rgba(226,226,226,1);
            .item_top_left {
              float: left;
              width:120px;
              height:42px;
              font-weight:400;
              color:rgba(193,193,193,1);
              text-align: center;
              line-height: 42px;
              border: 1px solid rgba(193,193,193,1);
            }
            .item_top_center {
              float: left;
              margin-left: 50px;
              font-size:30px;
              line-height: 42px;
              color:rgba(51,51,51,1);
            }
            .item_top_right {
              float: right;
              font-size:26px;
              line-height: 42px;
              color:rgba(255,59,62,1);
            }
          }
          .item_middle {
            width: 100%;
            .item_middle_item {
              height: 157px;
              padding: 40px 0;
              border-bottom: 2px dotted rgba(226,226,226,1);
              .item_middle_item_top {
                height: 42px;
                font-family:SourceHanSansCN;
                .item_grade {
                  float: left;
                  width:80px;
                  height:42px;
                  line-height: 42px;
                  text-align: center;
                  background:#FF3B3E;
                  border-radius:21px;
                  font-size:24px;
                  font-weight:500;
                  color:rgba(255,255,255,1);
                }
                .item_title {
                  float: left;
                  width:387px;
                  margin-left: 20px;
                  line-height: 42px;
                  font-size:28px;
                  font-weight:500;
                  color:rgba(51,51,51,1);
                  overflow: hidden;
                  text-overflow:ellipsis;
                  white-space: nowrap;
                }
                .item_price {
                  float: right;
                  font-size:26px;
                  line-height: 42px;
                  font-weight:500;
                  color:rgba(51,51,51,1);
                }
              }
              .item_info {
                margin-top: 25px;
                height:23px;
                font-size:24px;
                font-family:SourceHanSansCN;
                font-weight:400;
                color:rgba(136,136,136,1);
              }
            }
          }
          .item_third {
            height: 98px;
            border-bottom: 2px dotted rgba(226,226,226,1);
            i {
              display: block;
              line-height: 98px;
              font-size:26px;
              font-family:SourceHanSansCN;
              font-weight:400;
              color:rgba(51,51,51,1);
            }
          }
          .item_bottom {
            height: 98px;
            .item_bottom_left {
              line-height: 98px;
              float: left;
              font-size:34px;
              font-family:Adobe Heiti Std;
              font-weight:normal;
              color:rgba(51,51,51,1);
              .item_bottom_left_states {
                font-size:26px;
                font-family:SourceHanSansCN;
              }
            }
            .item_bottom_right {
              float: right;
              padding: 0;
              width:110px;
              height:58px;
              line-height: 58px;
              border:2px solid rgba(51,51,51,1);
              border-radius:29px;
              margin-top: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
